<template>
    <el-main>
<!--      图片及简要  -->
      <el-row>
<!--        图片-->
           <el-col :offset="5" :span="4"><img :src="nfilm.nfImg" class="img"> </el-col>
<!--        影名 选座购票按钮   -->
        <el-col :offset="1" :span="4">
          <el-row><h1>{{nfilm.nfName}}</h1></el-row>
          <el-row class="distance">演&nbsp;员&nbsp;:&nbsp;{{nfilm.nfActor}}</el-row>
          <el-row class="distance">导&nbsp;演&nbsp;:&nbsp;{{nfilm.nfDirector}}</el-row>
          <el-row class="distance">价&nbsp;格&nbsp;:&nbsp;{{nfilm.nfPrice}}</el-row>
          <el-row class="distance1"><el-button @click="chooseseat">预约选座</el-button></el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="4" :span="10">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="table">
          <el-tab-pane label="介绍" name="first">介绍</el-tab-pane>
          <el-tab-pane label="演职人员" name="second">演职人员</el-tab-pane>
          <el-tab-pane label="奖项" name="third">奖项</el-tab-pane>
          <el-tab-pane label="选择场次" name="fourth" disabled >

             <el-row>
               <el-col :offset="3" :span="2" >放映时间</el-col>
               <el-col :offset="3" :span="2">放映厅</el-col>
               <el-col :offset="3" :span="2">售价（元）</el-col>
               <el-col :offset="3" :span="2">选座购票</el-col>
             </el-row>

            <el-row v-for="(showtable,i) in showTables" :key="i" >
              <el-col :offset="3" :span="2" class="distance">{{showtable.sDay}}号&nbsp;{{showtable.sHour}}点</el-col>
              <el-col :offset="3" :span="2"class="distance">{{showtable.sPlayHall}}厅</el-col>
              <el-col :offset="3" :span="2"class="distance">{{nfilm.nfPrice}}</el-col>
              <el-col :offset="3" :span="2"class="distance"><el-button @click="selectseat(showtable)">选座</el-button></el-col>
            </el-row>

          </el-tab-pane>
        </el-tabs>
        </el-col>
      </el-row>

    </el-main>
</template>

<script>
    export default {
        name: "OrderMovie" ,
      data() {
        return {
          activeName: 'first',
           nfId:this.$route.params.nfilm.nfId ,
           nfilm:this.$route.params.nfilm ,

            showTables:[{sDay:'',sHour:'',sPlayHall: '',sId:''}]
           //             {sDay:'aaa',sHour:'aaa',sPlayHall:1,sId:1,nfId: 100,id: 1,ofId:''}]
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        }  ,
        selectseat(showtable){
          // var p={
          //   sPlayHall:this.showtables[num].sPlayHall,//影厅id
            //   nfId:this.nfilm.nfId,//电影id
            //   nfChange:this.nfilm.nfChange,
            //   nfilm:this.nfilm,//影厅信息
            //   sDay:this.showtables[num].sDay,
            //   sHour:this.showtables[num].sHour,
            //   sprice:null,
            //   sId:this.showtables[num].sId
            // }
            //this.nfilm= this.$route.params.nfilm
            console.log(this.nfilm);
          console.log(this.showtable)
          this.$router.push({name:'seatselect',params:{'showtable':showtable,'nfilm':this.nfilm}});

        },
        getbatch(){
          var vm =this;
          this.axios({
            url:'http:loacalhost:80/api/nextfilm/getone/' +vm.nfId  ,
          })  .then(function (res) {
            if(res.data.success){
              console.log(res.data.data)
                vm.nfilm=res.data.data
            }

          })
        },
        chooseseat(){
          this.activeName='fourth'
          var vm=this;
          this.axios({
            url:'http://localhost:80/api/show/data/'+this.nfId,
          }).then(function (res) {
             if(res.data.success){

               vm.showTables=res.data.data;

                 console.log(vm.showTables);
             }
          })
        }
      },
      created() {
        //this.getbatch()
      } ,

    }
</script>

<style scoped>
  .img{
    height: 350px;
    width: 250px;
  }
  .table{
    width: 1000px;
  }
  .distance{
    margin-top: 20px;
  }
  .distance1{
    margin-top: 50px;
  }

</style>
